<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考勤时间</block>
		</cu-custom>
		
		<checkbox-group class="cu-list menu margin-top sm-border">
			<navigator url="shifts-add" class="cu-item">
				<view class="action text-lg">
					<text class="cuIcon-roundaddfill text-blue"></text><text class="margin-left-xs">新增班次</text>
				</view>
			</navigator>
			<view v-for="(item,index) in items" class="cu-item">
				<view class="content">
					<label @click="boxClick" :data-index="index">
						<checkbox class="round blue" :class="item.clicked?'checked':''" :checked="item.clicked"></checkbox>
						<text class="text-grey padding-left">{{item.name}}</text>
						<text class="text-grey padding-left">({{item.sname!=''?item.sname:'休息'}})</text>
					</label>
				</view>
				<view class="action text-lg">
					<button @click="selectShifts" :data-index="index" type="" class="cuIcon-edit text-gray bg-white"></button>
				</view>
			</view>
		</checkbox-group>
		
		<view class="cu-form-group margin-top">
			<view class="title">法定节假日自动排休</view>
			<switch class='blue' @change="AutoRest" :class="autorest?'checked':''" :checked="autorest?true:false"></switch>
		</view>
		<view class="bottom response">
			<button @click="saveTime" :disabled="loadding" style="background-color: #5599FF;" :loading="loadding" type="primary">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[{
					name:'星期一',
					shiftId:'a',
					clicked:true,
					sname:''
				},
				{
					name:'星期二',
					shiftId:'a',
					clicked:true,
					sname:''
				},
				{
					name:'星期三',
					shiftId:'a',
					clicked:true,
					sname:''
				},
				{
					name:'星期四',
					shiftId:'a',
					clicked:true,
					sname:''
				},
				{
					name:'星期五',
					shiftId:'a',
					clicked:true,
					sname:''
				},
				{
					name:'星期六',
					shiftId:'a',
					clicked:false,
					sname:''
				},
				{
					name:'星期日',
					shiftId:'a',
					clicked:false,
					sname:''
				},
				{
					name:'补班',
					shiftId:'a',
					clicked:true,
					sname:''
				},
				],
				shifts:[],
				selectShift:'',
				loadding:false,
				selectIndex:0,
				autorest:false
			}
		},
		watch:{
			selectShift(newvalue){
				console.log(newvalue)
				this.items[this.selectIndex].sname = newvalue.sname
				this.items[this.selectIndex].shiftId = newvalue.id
			}
		},
		onLoad(options) {
			if(typeof(options.selectShift)!='undefined'){
				let selectShift = JSON.parse(options.selectShift)
				this.items.forEach(function(item,index){
					if(index!=5&&index!=6){
						item.sname = selectShift.sname
						item.shiftId = selectShift.id
					}
				})
			}
			if(typeof(options.atttimes)!='undefined'&&options.atttimes!="{}"){
				let atttimes = JSON.parse(options.atttimes)
				this.items = atttimes.times
				this.autorest = atttimes.autorest
			}
		},
		methods: {
			AutoRest(e){
				this.autorest = !this.autorest
			},
			boxClick(e){
				let index = e.currentTarget.dataset.index
				console.log(e)
				this.items[index].clicked = !this.items[index].clicked
			},
			selectShifts(e){
				this.selectIndex = e.currentTarget.dataset.index
				uni.navigateTo({
					url:'attendance-shifts'
				})
			},
			saveTime(e){
				let pages = getCurrentPages()
				// console.log(pages)
				let prePage = pages[pages.length - 2]
				let atttimes = {
					times:this.items,
					autorest:this.autorest
				}
				prePage.atttimes = atttimes
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.action button::after {
		border: none;
	}

	.bottom {
		background-color: #FFFFFF;
		padding: 30upx;
		position: fixed;
		bottom: 0;
	}
</style>
